<template>
    <ul class="user_Overview">
        <li class="user_Overview-item">
            <p class="money" style="color:#0FA9FF;">{{ sjlist?sjlist.incomeAllday:"" }}</p>
            <p class="name1"> 累计收入(万元)</p>
            <div class="user_Overview_nums allnum "> </div>
        </li>
        <li class="user_Overview-item">
            <p class="money" tyle="color: #1EE7E7">{{sjlist? sjlist.incomePreday:'' }}</p>
            <p class="name1"> 昨日收益(元)</p>
            <div class="user_Overview_nums online"> </div>
        </li>
    </ul>
</template>

<script>

export default {
    props: ['sjlist']
};
</script>
<style lang='scss' scoped>
.user_Overview {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0 100px;

    li {
        width: 120px;
        margin-top: 28px;


        .money {

            font-size: 20px;
            color: #0FA9FF;
            line-height: 20px;
            text-align: center;
            margin: 4px 0;
        }

        .name1 {
            font-weight: 500;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 20px;
            text-align: center;
            margin: 4px 0;

        }

        .user_Overview_nums {
            width: 100px;
            height: 83px;
            margin: 8px auto;
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {

            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../../assets/img/rtop1.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/rtop2.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");

            }
        }
    }
}
</style>